<template>
  <h1> Vite + Vue3 + TS </h1>
  <h2>{{ obj }}</h2>
  <button @click="clickMe">点我</button>
</template>

<script setup lang="ts">
import { reactive, watch } from 'vue';

const obj = reactive({
  name: '张三',
  age: 14,
  cp: {
    name: '如花',
    age: 13,
  },
});

const clickMe = () => {
  // obj.name = '李四';
  obj.cp.age++;
};

// 因为reactive() 默认是深度监听，能监听到所有的子属性。所以监听对象时不需要再设置开启深度监听

// * 监听 reactive() 定义的响应式数据(对象)
watch(obj, val => {
  console.log('obj', val);
});

// * 监听对象的某一项属性
watch(
  () => obj.cp.age,
  val => {
    console.log('obj.cp.age', val);
  },
);

// * 初始化监听
watch(
  () => obj.cp.age,
  val => {
    console.log('obj.cp.age', val);
  },
  {
    immediate: true,
  },
);

// *  reactive 定义的对象，对象的某一项还是对象时 且 是监听的数据源时的写法

// 推荐
watch(obj.cp, val => {
  console.log('obj.cp', val);
});

// 不推荐
watch(
  () => obj.cp,
  val => {
    console.log('() => obj.cp', val);
  },
  {
    deep: true,
  },
);
</script>
